<template>
  <div class="top-right-cmp">
    <div class="chart-name">
      设备故障月趋势
      <dv-decoration-3 style="width:200px;height:20px;" />
    </div>
<!--    <dv-charts :option="option" />-->
    <Echart
        :options="option"
        id="TopMiddleCmp"
        height="100%"
        width="100%"
    ></Echart>
  </div>
</template>
<script type="text/javascript" src="@/utils/echarts-auto-tooltip.js"></script>
<script>
import Echart from '@/common/echart'
export default {
  props: {
    chartData: {
      type: Object,
      required: true
    }
  },
  components: {
    Echart,
  },
  name: 'TopRightCmp',
  data () {
    return {
      option: {
        tooltip: {
          trigger: 'axis',
          backgroundColor: "rgba(255,255,255,0.1)",
          borderColor:  "rgba(255,255,255,0.1)",
          borderWidth: "0",
          textStyle: {
            color: "#fff"
          },
          axisPointer: {
            type: "shadow",
            label: {
              show: true,
              backgroundColor: "#7B7DDC"
            }
          }
        },
        legend: {
          data: ['0'],
          textStyle: {
            fill: '#fff'
          },
          bottom:0
        },
        xAxis: {
          data: function (){
            let date = new Date()
            let day = date.getDate();
            console.log(day)
            const arr = []
            for (let i = 0 ;i < day; i++)
            {
              arr.push(' '+i)
            }
            console.log(arr)
            return arr
          }(),
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#AAAAAA'
            }
          },
          axisLabel: {
            color: '#AAAAAA',
            fontSize:10
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#AAAAAA'
            }
          },
          axisLabel: {
            color: '#AAAAAA',
            fontSize:10
          },
          axisTick: {
            show: false
          }
        },
        series: [{
          type: 'line',
          name: '0',
          data: function (){
            let date = new Date()
            let day = date.getDate();
            const arr = []
            for (let i = 0 ;i < day; i++)
            {
              arr.push(0)
            }
            return arr
          }(),
          smooth: false
        }
        ]
      }
    }
  },
  watch: {
    chartData: {
      handler(newData) {
        if (newData != null && newData.fault !== undefined) {
          const fault = newData.fault
          const faultDeviceTypes = fault.faultDeviceType
          if(faultDeviceTypes != null && faultDeviceTypes.length > 0){
            const category = faultDeviceTypes[0].category;
            const date = faultDeviceTypes[0].date
            this.option = {
              tooltip: {
                trigger: 'axis',
              },
              legend: {
                data:category,
                textStyle: {
                  fill: '#fff'
                },
                bottom:0
              },
              xAxis: {
                data: date,
                boundaryGap: false,
                axisLine: {
                  lineStyle: {
                    color: '#AAAAAA'
                  }
                },
                axisLabel: {
                  color: '#AAAAAA',
                  fontSize:10
                }
              },
              yAxis: {
                type: 'value',
                splitLine: {
                  show: false
                },
                axisLine: {
                  lineStyle: {
                    color: '#AAAAAA'
                  }
                },
                axisLabel: {
                  color: '#AAAAAA',
                  fontSize:10
                },
                axisTick: {
                  show: false
                }
              },
              series: this.getSeries(faultDeviceTypes)
            }
          }
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods:{
    getOption()
    {
     const option =  {
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['0'],
          textStyle: {
            fill: '#fff'
          },
          bottom:0
        },
        xAxis: {
          data: this.getZero(),
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#AAAAAA'
            }
          },
          axisLabel: {
            color: '#AAAAAA',
            fontSize:10
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#AAAAAA'
            }
          },
          axisLabel: {
            color: '#AAAAAA',
            fontSize:10
          },
          axisTick: {
            show: false
          }
        },
        series: [{
          type: 'line',
          name: '0',
          data: this.getData(),
          smooth: false
        }]
      }
      return option
    },
    getSeries(faultDeviceTypes) {
      const arr =[]
      let i = 0;
      for(const faultDeviceType of faultDeviceTypes ){
        arr.push({
          type: 'line',
          name: faultDeviceType.category[i],
          data: faultDeviceType.count,
          smooth: false
        })
        i++
      }
      return arr;
    }
  },
  getZero()
  {
    let date = new Date()
    let day = date.getDay();
    const arr = []
    for (let i = 0 ;i < day; i++)
    {
      arr.push(' '+i)
    }
    console.log(arr)
    return arr
  },
  getData()
  {
    let date = new Date()
    let day = date.getDay();
    const arr = []
    for (let i = 0 ;i < day; i++)
    {
      arr.push(0)
    }
    return arr
  }
}
</script>

<style lang="scss">
.top-right-cmp {
  position: relative;
  padding: 0 50px;
  box-sizing: border-box;

  .chart-name {
    position: absolute;
    right: 70px;
    text-align: right;
    font-size: 20px;
    top: 10px;
  }
}
</style>
